<!--
 * @Author: your name
 * @Date: 2021-11-09 20:29:38
 * @LastEditTime: 2021-12-02 19:03:39
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\App.vue
-->
<template>
  <div id="app">
    <el-backtop target=".container" :bottom="100" :right="100"></el-backtop>
    <div class="search-dialog" v-if="isShow">
      <div class="dialog-wrapper">
        <div class="wrapper-header">
          <div>{{ $t("search") }}</div>
          <div class="close-esc" @click="isShow = false">
            <i class="iconfont icon-chahao"></i>
            <p>esc</p>
          </div>
        </div>
        <div class="wrapper-searchInp">
          <a-input-search
            :placeholder="$t('search_placeholder')"
            enter-button
            @search="onSearch"
            style="height: 40px"
            v-model="searchVal"
          />
        </div>
        <div class="wrapper-main">
          <div
            v-for="item in searchList"
            :key="item.id"
            class="sch-item"
            @click="toArticleDetail(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="header-wrapper">
        <div class="header">
          <div class="nav-header">
            <div class="logo" @click="cutPath()">
              <img :src="logo" alt="" />
            </div>
            <div v-for="(item, index) in stairRoutes" :key="index">
              <div
                v-if="item.id"
                :class="activeItem(item.pathUrl)"
                @click="cutPath(item.pathUrl)"
              >
                {{ item.title }}
              </div>
              <div
                v-else
                :class="activeItem(item.path)"
                @click="cutPath(item.path)"
              >
                {{ SRoutes[index] }}
              </div>
            </div>
          </div>
          <div class="handler-header">
            <el-dropdown>
              <i class="iconfont icon-zhongyingwenqiehuan hover"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toggleLang('en')">{{
                  $t("cut_language.EngList")
                }}</el-dropdown-item>
                <el-dropdown-item @click.native="toggleLang('zh')">{{
                  $t("cut_language.Chinese")
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div class="animate" @click="modelBrn" v-if="!dark">
              <i
                class="iconfont icon-icon_qingtian"
                style="color: #eec413; font-size: 32px"
              ></i>
            </div>
            <div v-else @click="modelBrn" class="animate1">
              <i
                class="iconfont icon-yejian"
                style="color: #e684af; font-size: 24px"
              ></i>
            </div>
            <div @click="showDialog">
              <i class="iconfont icon-fangdajing1 hover"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <!-- 二级路由出口 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import logo from "./assets/1.webp";
import stairRoutes from "./router/stairRoutes";
import api from "./api";
import { mapState, mapMutations } from "vuex";
import themeMixin from "./mixins/theme"; //引入主题色混入
export default {
  mixins: [themeMixin], //主题混入
  data() {
    return {
      logo,
      stairRoutes, //一级路由
      isShow: false,
      searchVal: "",
      searchList: [],
      browserInfo: {},
    };
  },
  computed: {
    ...mapState("app", ["refreshNum"]),
    pathname() {
      const route = this.$route.fullPath;
      return route;
    },
    SRoutes() {
      return this.$t("stairRoutes");
    },
  },
  methods: {
    ...mapMutations("app", ["add_refreshNum"]),
    //动态样式
    activeItem(path) {
      const isStair = this.stairRoutes.find((item) => item.path === path);
      if (isStair) {
        if (this.pathname === path) return "nav-item active-item";
        return "nav-item";
      } else {
        if (this.pathname === `/page/${path}`) return "nav-item active-item";
        return "nav-item";
      }
    },
    //切换路由
    cutPath(path) {
      //如果参数为空则返回首页---->点击头像情况
      if (path === undefined) {
        this.$router.push(stairRoutes[0].path);
      } else {
        const isStair = this.stairRoutes.find((item) => item.path === path);
        if (isStair) {
          //路由跳转
          this.$router.push(path);
        } else {
          //跳转页面管理
          this.$router.push(`/page/${path}`);
        }
      }
    },
    //获取页面数据
    async getPage() {
      const res = await api.getPassPage();
      //循环推入到渲染一级路由中
      res.data.forEach((item) => {
        this.stairRoutes.push(item);
      });
    },
    //搜索事件
    async onSearch() {
      if (this.searchVal) {
        const res = await api.searchArticle(this.searchVal);
        console.log(res);
        if (res.success) {
          this.searchList = res.data;
        } else {
          this.$message({
            type: "warning",
            message: "意外的错误",
          });
        }
      } else {
        this.searchList = [];
      }
    },
    toArticleDetail(id) {
      this.$router.push(`/article/${id}`);
      this.isShow = false;
    },
    //监听页面返回事件
    onkeydown() {
      document.onkeydown = (e) => {
        if (e.keyCode === 27) {
          this.isShow = false;
        }
      };
    },
    showDialog() {
      this.isShow = true;
      this.searchList = [];
      this.searchVal = "";
    },
    //浏览器用户访问信息
    getBrowserInfo() {
      let browser = navigator.userAgent;
      browser = browser.split(" ");
      this.browserInfo.OS = browser[1].split("(")[1] + browser[3]; //操作系统
      this.browserInfo.browser = browser[10]; //浏览器信息
      this.browserInfo.url = window.location.href; //访问的url
      this.browserInfo.userAgent = navigator.userAgent; //userAgent信息
      this.browserInfo.ip = window.sessionStorage.getItem("ip"); //用户ip地址
      this.browserInfo.location = window.sessionStorage.getItem("cname"); //用户位置(地理)
      this.browserInfo.core = "Blink" + " " + browser[10].split("/")[1]; //浏览器内核
      //信息保存在本地
      window.sessionStorage.setItem(
        "browser",
        JSON.stringify(this.browserInfo)
      );
    },
    //切换语言
    toggleLang(lang) {
      if (lang == "zh") {
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
      } else if (lang == "en") {
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
      }
    },
  },
  async mounted() {
    this.onkeydown();
  },
  created() {
    //判断页面刷新次数 -->上限一次 防止重复调用getPage方法
    if (!this.refreshNum) {
      this.add_refreshNum();
      this.getPage();
    }
    this.getBrowserInfo();
  },
};
</script>
<style scoped lang="scss">
@import "./assets/scss/common/common.scss";
//    /deep/深度选择器
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 66px;
  @include font_color("text-color");
  @include background_color("header_color");
  border-bottom: 1px solid;
  @include border_color("border-color");
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  .header {
    width: 1128px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-header {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.nav-header .nav-item {
  padding: 0 20px;
}
.nav-header .nav-item:hover {
  color: #ff0064;
}
.nav-header .nav-item.active-item {
  color: #ff0064;
}
::v-deep .main {
  width: 100%;
  > div {
    width: 1128px;
    margin: 0 auto;
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.handler-header {
  display: flex;
  align-items: center;
  div {
    margin: 0 20px;
    cursor: pointer;
  }
  div .iconfont {
    font-size: 21px;
  }
  div .iconfont.hover {
    @include font_color("text-color");
  }
  div .iconfont.hover:hover {
    color: #ff0064;
  }
  .animate:hover {
    animation: turn 0.2s linear;
    animation-fill-mode: forwards;
  }
  .animate {
    animation: turn1 0.2s linear;
    animation-fill-mode: forwards;
  }
  .animate1:hover {
    animation: turn2 0.2s linear;
    animation-fill-mode: forwards;
  }
  .animate1 {
    animation: turn3 0.2s linear;
    animation-fill-mode: forwards;
  }
}
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(20deg);
  }
}
@keyframes turn1 {
  0% {
    transform: rotate(20deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
@keyframes turn2 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-25deg);
  }
}
@keyframes turn3 {
  0% {
    transform: rotate(-25deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.search-dialog {
  width: 100%;
  height: 100%;
  @include background_color("search_color");
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  .dialog-wrapper {
    width: 1128px;
    margin: 0 auto;
  }
}
.wrapper-header {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;

  > div:first-child {
    font-weight: bold;
    font-size: 24px;
  }
  .close-esc {
    text-align: center;
    cursor: pointer;
    color: #a6a6a6;
  }
}
.wrapper-searchInp {
  width: 100%;
  display: flex;
  align-items: center;
}
.wrapper-main {
  width: 100%;
  height: 570px;
  overflow-y: scroll;
}
//滚动条样式
.wrapper-main::-webkit-scrollbar {
  width: 5px !important;
}
//滚动条里面小方块样式
.wrapper-main::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.sch-item {
  width: 100%;
  padding: 10px 0;
  padding-left: 5px;
  font-size: 16px;
  cursor: pointer;
  @include font_color("text-color");
  border-radius: 4px;
}
.sch-item:hover {
  background-color: #e7eaee;
  @include font_color("search_hover");
}
</style>

<style lang="scss">
@import "./assets/scss/common/common.scss";

.el-card .el-card__header {
  border-bottom: 1px solid;
  @include border_color("card_border_color");
}
</style>
<style lang="scss">
@import "./assets/scss/common/common.scss";
@mixin color($color) {
  background-color: $color;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body,
#app,
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  @include background_color("background_color");
  @include font_color("text-color");
}
h2,
h1 {
  @include font_color("text-color");
}
.el_card .el-card__header {
  border-bottom: 1px solid #000;
}
//滚动条样式
.container::-webkit-scrollbar {
  width: 5px !important;
}
//滚动条里面小方块样式
.container::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.logo {
  width: 70px;
  height: 40px;
  margin-right: 40px;
  img {
    width: 100%;
    height: 100%;
  }
}
.container {
  height: 100%;
  overflow: scroll;
}
</style>
